<template>
  <div
    class="sign-drag"
    :style="{
      left: `${left}px`,
      top: `${top}px`,
      width: `${width}px`,
      height: `${height}px`,
      zIndex: active ? 100 : 10
    }"
    @mousedown="handleMouseDown"
  >
    <!-- 签章内容 -->
    <div class="sign-content" :class="{ active }">
      <!-- 公章 -->
      <div v-if="signMethod === 1" class="sign-seal public-seal">
        <img :src="publicSealImgRef" alt="公章" />
      </div>
      
      <!-- 私章 -->
      <div v-else-if="signMethod === 3" class="sign-seal ones-seal">
        <img :src="onesSealImgRef" alt="私章" />
      </div>
      
      <!-- 财务章 -->
      <div v-else-if="signMethod === 4" class="sign-seal cwz-seal">
        <img :src="cwzSealImgRef" alt="财务章" />
      </div>
      
      <!-- 签字 -->
      <div v-else class="sign-seal qz-seal">
        <div class="sign-name">{{ personName }}</div>
      </div>
      
      <!-- 签署落款 -->
      <div v-if="showSignature" class="sign-signature">
        {{ identityNames || '签署人' }}
      </div>
      
      <!-- 签署日期 -->
      <div v-if="showDate" class="sign-date">
        {{ formatDate(new Date()) }}
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div v-if="active" class="sign-actions">
      <div class="sign-action-item" @click.stop="handleEdit">
        <i class="el-icon-edit"></i>
      </div>
      <div class="sign-action-item" @click.stop="handleDelete">
        <i class="el-icon-delete"></i>
      </div>
    </div>
    
    <!-- 拖拽手柄 -->
    <div
      v-if="active"
      class="sign-resize-handle"
      @mousedown.stop="handleResizeStart"
    ></div>
  </div>
</template>

<script>
import { ref, computed, defineComponent } from 'vue'
import signPositionConst from '../../constant/signPosition'

// 公章图片
import publicSealImg from '../../assets/public-seal.svg'
// 私章图片
import onesSealImg from '../../assets/ones-seal.svg'
// 财务章图片
import cwzSealImg from '../../assets/cwz-seal.svg'

export default defineComponent({
  name: 'SignDrag',
  
  props: {
    // 签章ID
    siteId: {
      type: String,
      required: true
    },
    // 页码
    page: {
      type: Number,
      default: 1
    },
    // X坐标
    posx: {
      type: Number,
      default: 0
    },
    // Y坐标
    posy: {
      type: Number,
      default: 0
    },
    // 宽度
    width: {
      type: Number,
      default: 100
    },
    // 高度
    height: {
      type: Number,
      default: 100
    },
    // 签章类型
    signMethod: {
      type: Number,
      default: 1
    },
    // 签署主体ID
    signSubjectId: {
      type: String,
      default: ''
    },
    // 签署人姓名
    personName: {
      type: String,
      default: ''
    },
    // 身份名称
    identityNames: {
      type: String,
      default: ''
    },
    // 显示签署落款
    showSignature: {
      type: Boolean,
      default: true
    },
    // 显示日期
    showDate: {
      type: Boolean,
      default: true
    },
    // 是否激活
    active: {
      type: Boolean,
      default: false
    },
    // 容器宽度
    containerWidth: {
      type: Number,
      default: 0
    },
    // 容器高度
    containerHeight: {
      type: Number,
      default: 0
    }
  },
  
  emits: ['update:active', 'drag', 'dragEnd', 'resize', 'edit', 'delete'],
  
  setup(props, { emit }) {
    // 位置状态
    const left = ref(props.posx)
    const top = ref(props.posy)
    
    // 拖拽状态
    const isDragging = ref(false)
    const startX = ref(0)
    const startY = ref(0)
    const startLeft = ref(0)
    const startTop = ref(0)
    
    // 调整大小状态
    const isResizing = ref(false)
    const startWidth = ref(0)
    const startHeight = ref(0)
    
    // 图片资源
    const publicSealImgRef = ref(publicSealImg)
    const onesSealImgRef = ref(onesSealImg)
    const cwzSealImgRef = ref(cwzSealImg)
    
    /**
     * 处理鼠标按下事件
     */
    const handleMouseDown = (event) => {
      // 激活当前签章
      emit('update:active', true)
      
      // 开始拖拽
      isDragging.value = true
      startX.value = event.clientX
      startY.value = event.clientY
      startLeft.value = left.value
      startTop.value = top.value
      
      // 添加事件监听
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    }
    
    /**
     * 处理鼠标移动事件
     */
    const handleMouseMove = (event) => {
      if (!isDragging.value && !isResizing.value) return
      
      if (isDragging.value) {
        // 计算新位置
        const newLeft = startLeft.value + (event.clientX - startX.value)
        const newTop = startTop.value + (event.clientY - startY.value)
        
        // 边界检查
        left.value = Math.max(0, Math.min(newLeft, props.containerWidth - props.width))
        top.value = Math.max(0, Math.min(newTop, props.containerHeight - props.height))
        
        // 触发拖拽事件
        emit('drag', {
          siteId: props.siteId,
          page: props.page,
          posx: left.value,
          posy: top.value,
          width: props.width,
          height: props.height,
          signMethod: props.signMethod,
          signSubjectId: props.signSubjectId
        })
      } else if (isResizing.value) {
        // 计算新尺寸
        const newWidth = startWidth.value + (event.clientX - startX.value)
        const newHeight = startHeight.value + (event.clientY - startY.value)
        
        // 触发调整大小事件
        emit('resize', {
          siteId: props.siteId,
          width: Math.max(50, newWidth),
          height: Math.max(50, newHeight)
        })
      }
    }
    
    /**
     * 处理鼠标释放事件
     */
    const handleMouseUp = () => {
      if (isDragging.value) {
        // 触发拖拽结束事件
        emit('dragEnd', {
          siteId: props.siteId,
          page: props.page,
          posx: left.value,
          posy: top.value,
          width: props.width,
          height: props.height,
          signMethod: props.signMethod,
          signSubjectId: props.signSubjectId
        })
      }
      
      // 重置状态
      isDragging.value = false
      isResizing.value = false
      
      // 移除事件监听
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }
    
    /**
     * 处理调整大小开始
     */
    const handleResizeStart = (event) => {
      event.stopPropagation()
      
      // 开始调整大小
      isResizing.value = true
      startX.value = event.clientX
      startY.value = event.clientY
      startWidth.value = props.width
      startHeight.value = props.height
      
      // 添加事件监听
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    }
    
    /**
     * 处理编辑
     */
    const handleEdit = () => {
      emit('edit', {
        siteId: props.siteId,
        page: props.page,
        posx: left.value,
        posy: top.value,
        width: props.width,
        height: props.height,
        signMethod: props.signMethod,
        signSubjectId: props.signSubjectId,
        showSignature: props.showSignature,
        showDate: props.showDate
      })
    }
    
    /**
     * 处理删除
     */
    const handleDelete = () => {
      emit('delete', props.siteId)
    }
    
    /**
     * 格式化日期
     */
    const formatDate = (date) => {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}年${month}月${day}日`
    }
    
    return {
      left,
      top,
      publicSealImgRef,
      onesSealImgRef,
      cwzSealImgRef,
      handleMouseDown,
      handleResizeStart,
      handleEdit,
      handleDelete,
      formatDate
    }
  }
})
</script>

<style lang="scss" scoped>
.sign-drag {
  position: absolute;
  cursor: move;
  user-select: none;
  
  .sign-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed transparent;
    
    &.active {
      border-color: #409eff;
    }
  }
  
  .sign-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    &.public-seal {
      color: #ff0000;
    }
    
    &.ones-seal {
      color: #ff0000;
    }
    
    &.cwz-seal {
      color: #ff0000;
    }
    
    &.qz-seal {
      color: #000000;
      
      .sign-name {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  
  .sign-signature {
    margin-top: 5px;
    font-size: 12px;
    color: #333;
  }
  
  .sign-date {
    margin-top: 2px;
    font-size: 12px;
    color: #666;
  }
  
  .sign-actions {
    position: absolute;
    top: -30px;
    right: 0;
    display: flex;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .sign-action-item {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      &:hover {
        color: #409eff;
      }
    }
  }
  
  .sign-resize-handle {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background-color: #409eff;
    border-radius: 50%;
    cursor: se-resize;
  }
}
</style>